<template>
  <el-container>
    <el-aside width="185px" class="menu-box">
      <div>
        <el-menu class="left-menu-height" :router="true" default-active="/" unique-opened>
          <el-menu-item index="/customer">
            <el-icon>
              <avatar/>
            </el-icon>
            <template #title>客户管理</template>
          </el-menu-item>
          <el-menu-item index="/bom">
            <el-icon>
              <present/>
            </el-icon>
            <template #title>物料管理</template>
          </el-menu-item>
          <el-menu-item index="/order">
            <el-icon>
              <ShoppingCartFull/>
            </el-icon>
            <template #title>订单管理</template>
          </el-menu-item>
          <el-menu-item index="/out">
            <el-icon>
              <SoldOut/>
            </el-icon>
            <template #title>出库管理</template>
          </el-menu-item>
          <el-menu-item index="/store">
            <el-icon>
              <Suitcase/>
            </el-icon>
            <template #title>库存管理</template>
          </el-menu-item>
          <el-menu-item index="/lbl">
            <el-icon>
              <PriceTag/>
            </el-icon>
            <template #title>标签管理</template>
          </el-menu-item>
          <el-menu-item index="/mat">
            <el-icon>
              <setting/>
            </el-icon>
            <template #title>原料管理</template>
          </el-menu-item>
          <el-sub-menu index="/system">
            <template #title>
              <el-icon>
                <setting/>
              </el-icon>
              <span>系统设置</span>
            </template>
            <el-menu-item index="/system/template">模板管理</el-menu-item>
            <el-menu-item index="/system/dict">字典管理</el-menu-item>
            <el-menu-item index="/system/backup-and-restore">数据备份/还原</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <div class="logo-box">
          <img src="../assets/logo.png" alt="北京圣美印刷有限责任公司">
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-header height="56px" class="index-header">
        <div class="header-box">
          <div>
            <el-breadcrumb :separator-icon="arrowRight">
              <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/' }"><a href="/">promotion management</a></el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/' }">promotion list</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/' }">promotion detail</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div></div>
        </div>
      </el-header>
      <el-main class="index-main">
        <div>
          <router-view></router-view>
        </div>
      </el-main>
      <el-footer height="32px" class="footer-copyright">
        <div>北京圣美印刷有限责任公司&nbsp;&copy; 2023 - Presents All rights reserved</div>
      </el-footer>
    </el-container>
  </el-container>
</template>
<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import {
  Avatar,
  Present,
  ShoppingCartFull,
  Setting,
  ArrowRight,
  Suitcase,
  SoldOut,
  PriceTag
} from "@element-plus/icons-vue";
import {markRaw} from "vue";

@Options({
  components: {
    Avatar,
    Present,
    ShoppingCartFull,
    Setting,
    ArrowRight,
    Suitcase,
    SoldOut,
    PriceTag
  }
})
export default class IndexView extends Vue {
  arrowRight = markRaw(ArrowRight);

  // created() {
  //   console.log(this.$route.meta);
  // }
}
</script>
<style scoped lang="scss">
.menu-box {
  width: 185px;
  padding: 16px 8px 16px 16px;
  overflow: hidden;

  & > div {
    padding-top: 8px;
    height: 100%;
    width: 160px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 5px 0 #4884E9;
  }
}

.left-menu-height {
  width: 161px;
  height: calc(100% - 160px);
}


.index-header {
  padding: 16px 16px 0 8px;

  .header-box {
    height: 32px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.index-main {
  padding: 5px 16px 10px 8px;
  overflow: hidden;

  & > div {
    overflow: hidden;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 5px 0 #4884E9;
  }
}

.footer-copyright {
  text-align: center;
  line-height: 24px;
  padding: 0 16px;

  div {
    height: 32px;
    border-radius: 8px;
    background-color: #fff;
  }
}

.logo-box {
  width: 160px;
  height: 160px;

  img {
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.4);
    width: 100%;
  }
}
</style>
<style lang="scss">
.el-header {
  height: 44px;
}
</style>